<template>
  <div class="app-container dashboard-container">

    <el-row :gutter="30" class="card">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 15px">用户总览</span>
            </div>
            <div class="text box_item">
              <div class="box_item_1">
                <div class="iii">
                  <p class="p1">
                    {{ userOverviewRes.todayCount ? userOverviewRes.todayCount : 0 }}
                  </p>
                  <p>今日新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userOverviewRes.yesterdayCount ? userOverviewRes.yesterdayCount : 0 }}
                  </p>
                  <p>昨日新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userOverviewRes.weekCount ? userOverviewRes.weekCount : 0 }}
                  </p>
                  <p>本周新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userOverviewRes.totalCount ? userOverviewRes.totalCount : 0 }}
                  </p>
                  <p>会员总数</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 15px">有效用户</span>
            </div>
            <div class="text box_item">
              <div class="box_item_1">
                <div class="iii">
                  <p class="p1">
                    {{ userEffectiveRes.todayCount ? userEffectiveRes.todayCount : 0 }}
                  </p>
                  <p>今日新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userEffectiveRes.yesterdayCount ? userEffectiveRes.yesterdayCount : 0 }}
                  </p>
                  <p>昨日新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userEffectiveRes.weekCount ? userEffectiveRes.weekCount : 0 }}
                  </p>
                  <p>本周新增</p>
                </div>
                <div class="iii">
                  <p class="p1">
                    {{ userEffectiveRes.totalCount ? userEffectiveRes.totalCount : 0 }}
                  </p>
                  <p>会员总数</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span class="header_title">充提统计（USDT）</span>
      </div>
      <div class="boshitj">
        <div class="left">
          <div class="leftheader">
            <p class="p1">本月充值总额</p>
            <p class="p2">10000</p>
            <p class="p3">
              <!-- <span class="span1">
                <i class="el-icon-caret-top i1"></i>
                <span>10%</span></span -->
              <!-- > -->
              <!-- 同比上周 -->
            </p>
          </div>
          <div class="leftheader" style="margin-top: 50px">
            <p class="p1">本周充值总额</p>
            <p class="p2">10000</p>
            <p class="p3">
              <!-- <span class="span1">
                <i class="el-icon-caret-bottom i2"></i>
                <span>10%</span></span
              > -->
              <!-- 同比上周 -->
            </p>
          </div>
        </div>
        <div style="width: 100%; height: 400px; position: relative">
          <div style="position: absolute; top: 0; right: 20px;z-index:999;">

                  &nbsp; <span
v-for="(item,key) in {
                    0:'今日',
                    1:'本周',
                    2:'本月',
                  }"
:key="key"
@click="setday(key)">{{ item }} &nbsp;</span>       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

                  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <span style="margin-left:10px">请选择范围:</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />
          </div>
          <div id="myChart" :style="{ width: '100%', height: '400px' }" />
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { homeindex } from '@/api/login'

/**
 * 记录访问，只有页面刷新或者第一次加载才会记录
 */
// count().then(res => {
// })

export default {
  name: 'Dashboard',
  data() {
    return {
      userEffectiveRes: {},
      userOverviewRes: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: '',
      value2: ''
    }
  },

  mounted() {
    this.homeindex()
    this.drawLine()
    this.drawLine2()
  },
  methods: {
    homeindex() {
      homeindex().then((res) => {
        if (res.code == 0) {
          this.userEffectiveRes = res.data.userEffectiveRes
          this.userOverviewRes = res.data.userOverviewRes
        }
      })
    },
    setday() {

    },
    // 绘制第一个图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '订单统计', left: '20px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#49a9ee' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              // 标注的样式。点的样式
              color: '#49a9ee', // 点填充的颜色
              borderColor: '#49a9ee' // 点边框
            },
            lineStyle: {
              // 线条
              color: '#49a9ee', // 线条的颜色
              width: '2' // 线条大小
            }
          }
        ]
      })
    },
    // 绘制第二个图表
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      const myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      myChart2.setOption({
        title: { text: '订单统计', left: '20px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [1820, 9232, 9301, 934, 12290, 13330, 13210],
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#49a9ee' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              // 标注的样式。点的样式
              color: '#49a9ee', // 点填充的颜色
              borderColor: '#49a9ee' // 点边框
            },
            lineStyle: {
              // 线条
              color: '#49a9ee', // 线条的颜色
              width: '2' // 线条大小
            }
          }
        ]
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.card {
  margin-top: 30px;
  .header_title {
    font-size: 15px;
  }
  .dfacjsa {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .dffcacjfs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 70px;
    margin: 0 50px;
    font-size: 15px;
    p {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }
  }
  .dfacjfs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .item {
      width: 65px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      margin-right: 30px;
      cursor: pointer;
    }
  }
  .box_item {
    font-size: 20px;
    .box_item_1 {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .iii {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .p1 {
          font-size: 35px;
          margin-bottom: 5px;
          color: green;
        }
      }
    }
  }
  .boshitj {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .left {
      width: 200px;
      height: 400px;
      border-right: 1px solid #eee;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .leftheader {
        margin-top: 30px;
        .p1 {
          font-size: 15px;
          color: #999;
        }
        .p2 {
          font-size: 30px;
          color: red;
          height: 45px;
          line-height: 45px;
        }
        .p3 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .span1 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            .i1 {
              color: green;
              font-size: 20px;
            }
            .i2 {
              color: red;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
